<template>
    <UpPullLoad @trigger="loadMore">
        <div class="">
            <Topbar @search="search" class="sticky top-0 z-10 py-8 bg-white" :searchPlaceholder="placeholder"/>
            <div class="flex items-center justify-around p-2 text-sm font-medium text-center text-gray-500 bg-white ">
                <RouterLink :to="item.to" v-for="item in categorys">
                    <div>
                        <div><img :src="item.src" class="object-cover w-14 h-14" /></div>
                        <div>{{ item.name }}</div>
                    </div>
                </RouterLink>
            </div>

            <div class="flex items-center p-2 m-4 text-sm text-gray-500 rounded-lg bg-gray-50">
                <div class="font-bold text-orange-300 shrink-0">News </div>
                <div class="mx-2">|</div>
                <div class="tracking-wider grow line-clamp-1">
                    新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻
                </div>
                <div>
                    <IMingcute:right-fill />
                </div>
            </div>

            <div class="p-4 ">
                <img :src="ad" />
            </div>


            <div class="py-2 ">
                <Tabs>
                    <TabItem v-for="(item, index) in ['推荐', '关注', '临汾']" :title="item">
                        <div class="px-4 mt-2">
                            <Waterfall :items="data" :col="2">
                                <template #item="{ data, size }">
                                    <div class="mb-8 space-y-2">
                                        <LazyImage :src="data.thumb_url" class="mx-auto overflow-hidden rounded-lg "
                                            :size="size" />
                                        <div class="text-base line-clamp-1">{{ data.title }}</div>
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <div class="w-5 h-5 mr-1 overflow-hidden rounded-full">
                                                    <LazyImage :src="data.thumb_url" />
                                                </div>
                                                <div class="text-sm text-gray-500">
                                                {{ data.user.nickname }}
                                            </div>
                                            </div>
                                            <div class="flex items-center space-x-1 text-sm text-gray-500">
                                                <IMdi:heart class="text-red-400" />
                                                <div>39</div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </Waterfall>
                        </div>
                    </TabItem>
                </Tabs>

            </div>
        </div>
    </UpPullLoad>
</template>
    
<script setup lang='ts'>
import c1 from '~/assets/home/1.jpg'
import c2 from '~/assets/home/2.jpg'
import c3 from '~/assets/home/3.jpg'
import c4 from '~/assets/home/4.jpg'
import c5 from '~/assets/home/5.jpg'
import ad from '~/assets/ad/ad1.jpg'
import { tmpData } from './tmp'
const router = useRouter()
const placeholder = ref('猫咪不吃饭怎么办');
const categorys = [
    { name: '学堂', src: c1, to: { name: 'school' } },
    { name: '问答', src: c2, to: { name: 'qa' } },
    { name: '健康', src: c3, to: { name: 'school' } },
    { name: '圈子', src: c4, to: { name: 'school' } },
    { name: '服务', src: c5, to: { name: 'school' } },
]

const data = ref<any>([]);
data.value.push(
    ...tmpData.slice(0, 10)
)
const loadMore = ({ done }: any) => {
    console.log('load more ')
    setTimeout(() => {
        data.value.push(
            ...tmpData.slice(0, 10)
        )
        done();
    }, 50);
}
const search = ()=>{
    router.push({
        name:'search',
        query:{
            source:'home',
            q:'毛不吃饭怎么办'
        }
    })
}
onActivated(() => {
    console.log('home actived')
})
defineOptions({
    name: 'home'
})

</script>



<style scoped lang="scss">
:deep(.search) {
    @apply bg-gray-100;

    .search-text {
        @apply text-gray-500;
    }
}

:deep(.search-icon) {
    @apply text-gray-500;
}
</style>